<template>
  <view class="container">
    <view class="content">
      <!-- 头部 -->
      <up-status-bar></up-status-bar>
      <view class="header">
        <view class="l_f_r_sb_c">
          <view class="l_f_r" @click="$goURl('/pages/personal/set/userinfo')">
            <image class="avatar" :src="userInfo.head?userInfo.head:$defaultAvatar" mode="aspectFill">
            </image>
            <view class="right l_f_c ">
              <view class="l_f_r_c_c">
                <text class="text_b_36">{{ userInfo.nickname }}</text>
                <view class="level l_f_r_c_c text_5_24">{{ level[userInfo.level] }}</view>

              </view>
              <view class="text_5_26 text_c_5">邀请码：{{ (userInfo.user_id) }}</view>

            </view>
          </view>
          <view class="l_f_r_c_c qiehuan text_5_24" @click="$goURl('/pages/personal/set/accountManagement')">
            <image class="qiehuan_icon" src="https://img.fubaozx.cn/static/newImg/qiehuan.png"
                   mode="aspectFill"></image>
            切换账号
          </view>

        </view>
        <up-rate class="rate" :gutter="2" :count="5" inactiveColor="transparent" activeColor="#FF2C19" readonly
                 v-model="userInfo.new_level"></up-rate>

      </view>


      <!-- 常用工具 -->
      <view class="fff_cnt">

        <view class="" style="position: relative;top: 50rpx;left: 0;right: 0;bottom: 0;">
          <view class="title_box text_b_32 l_f_r">
            <image class="title_img" src="/static/accountImg/img0.png"></image>
            <text>券专区</text>
          </view>
          <view class="l_f_r_sb_c juan">
            <view class="it bg_set" @click="$goURl('/pages/personal/wallet/balance?wallet_type=0')">
              <view class="l_f_r_c_c l_j_s">
                <view class="text_5_26">消费券：</view>
                <view class="text_6_36"> {{ (userInfo.money).toFixed(2) }}</view>
              </view>
              <view class="l_f_r_c_c l_j_s">
                <view class="text_5_26">累计：</view>
                <view class="text_4_28"> {{ (userInfo.total_money).toFixed(2) }}</view>
              </view>

            </view>
            <view class="it2 it bg_set" @click="$goURl('/pages/personal/wallet/balance?wallet_type=1')">
              <view class="l_f_r_c_c l_j_s">
                <view class="text_5_26">补贴券：</view>
                <view class="text_6_36"> {{ (userInfo.coupon).toFixed(2) }}</view>
              </view>
              <view class="l_f_r_c_c l_j_s">
                <view class="text_5_26">累计：</view>
                <view class="text_4_28"> {{ (userInfo.total_coupon).toFixed(2) }}</view>
              </view>

            </view>
          </view>
          <view class="title_box text_b_32 l_f_r">
            <image class="title_img" src="https://img.fubaozx.cn/static/newImg/jficon.png"></image>
            <text>积分专区</text>
          </view>
          <view class="jifen ">

            <view class="jifen_cnt">
              <view class="it l_f_r l_al_c bg_set" v-for="(item,index) in integrationList" :key="index"
                    @click="$goURl(item.url)" :style="{backgroundImage:`url('${item.img2}')`}">
                <view class="left l_f_c_c_c l_al_s">
                  <text class="text_c_5 text_5_24">{{ item.name }}</text>

                  <view class="text_6_36 text_c_2d" style="font-size: 36rpx;">
                    {{ (userInfo[item.value]).toFixed(4) }}
                  </view>
                </view>
                <!-- <uni-icons type="forward" size="22"></uni-icons> -->
              </view>
            </view>
          </view>
          <view class="title_box text_b_32 l_f_r" style="margin-top: 30rpx">
            <image class="title_img" style="width: 50rpx;height: 50rpx" src="/static/accountImg/hb.png"></image>
            <text>红包专区</text>
          </view>
          <view class="jifen ">

            <view class="jifen_cnt">
              <view class="it l_f_r l_al_c bg_set" v-for="(item,index) in redPacketList" :key="index"
                    @click="$goURl(item.url)" :style="{backgroundImage:`url('${item.img2}')`}">
                <view class="left l_f_c_c_c l_al_s">
                  <text class="text_c_5 text_5_24">{{ item.name }}</text>

                  <view class="text_6_36 text_c_2d" style="font-size: 36rpx;">
                    {{ (userInfo[item.value]).toFixed(4) }}
                  </view>
                </view>
                <!-- <uni-icons type="forward" size="22"></uni-icons> -->
              </view>
            </view>
          </view>
          <!-- 常用工具 -->

          <view class="Tools ">
            <view class="items l_f_r_sb_c" v-for="(item,index) in orderlistsss" :key="index" @click="toUrl(item)">
              <view class="left l_f_r l_al_c">
                <image :src="item.img" mode="widthFix" style="width: 48rpx;height: 48rpx;margin-right: 12rpx;"></image>
                <view class="name" style="font-size: 24rpx;color: #2D2D2D;">{{ item.name }}</view>
              </view>
              <uni-icons type="right" size="20"></uni-icons>

            </view>


          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
//商品列表
import {
  getCurrentInstance,
  reactive,
  ref
} from "vue";
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onShow
} from "@dcloudio/uni-app";

const {
  proxy
} = getCurrentInstance();


const level = uni.getStorageSync('level')
const {
  appContext
} = getCurrentInstance();
let data = reactive({
  subscript: {},
  subscriptShow: false,
  current: 0,
  page: 0,
  size: 20,
  pages: 1,
  goodlistData: [],
  signAll: 0,
})
let userInfo = ref({})
let userLevel = ref([])
let account = ref("")

let orderlistsss = reactive([{
  img: 'https://img.fubaozx.cn/static/newImg/icon2.png',
  name: '粉丝管理',
  url: '/pages/personal/teams/team'
},])


let integrationList = reactive([
  // {
  //   name: '消费券',
  //   state: 4,
  //   img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335081992.png',
  //   url: '/pages/personal/wallet/balance?wallet_type=0',
  //   value: 'money'
  // },
  // {
  //   name: '补贴券',
  //   state: 3,
  //   img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335087359.png',
  //   url: '/pages/personal/wallet/balance?wallet_type=1',
  //   value: 'coupon'
  // },

  {
    name: '绿色积分',
    state: 1,
    img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335098384.png',
    img2: 'https://img.fubaozx.cn/hemajishi/17579199294874.png',

    url: '/pages/personal/wallet/balance?wallet_type=3',
    value: 'green'
  },
  {
    name: '资产积分',
    state: 2,
    img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335092376.png',
    img2: 'https://img.fubaozx.cn/hemajishi/17579199647095.png',

    url: '/pages/personal/wallet/balance?wallet_type=2',
    value: 'asset'
  },
  {
    name: '权益值',
    state: 4,
    img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335092376.png',
    img2: 'https://img.fubaozx.cn/hemajishi/17579199444469.png',

    url: '/pages/personal/wallet/balance?wallet_type=4',
    value: 'rights'
  },
  {
    name: '贡献值',
    state: 5,
    img: 'https://pili-vod.guanxikeji.com/fubao/img/1755335092376.png',
    img2: 'https://img.fubaozx.cn/hemajishi/17579198752710.png',

    url: '/pages/personal/wallet/balance?wallet_type=5',
    value: 'contribution'
  },
])
let redPacketList = reactive([

  {
    name: '资产红包',
    img2: 'https://pili-vod.guanxikeji.com/fubao/img/1759997741610.png',
    url: '/pages/personal/wallet/balance?wallet_type=7',
    value: 'asset_red'
  },
  {
    name: '补贴红包',
    img2: 'https://pili-vod.guanxikeji.com/fubao/img/1759997735456.png',
    url: '/pages/personal/wallet/balance?wallet_type=8',
    value: 'subsidy_red'
  },

])
onLoad((option) => {
  // pages/personal/index?token=3e6007c3ebf6484fb970840cd9480a53
  // const token = 'e3a15cb29af9926a0381e212277d7a80'
  // if(option.token||token){
  //   const userInfo = uni.getStorageSync('userInfo')
  //   userInfo.token = option.token||token
  //   uni.setStorageSync('userInfo', userInfo)
  //   inits()
  //
  // }

})

let moneyName = ref(null)
onShow(() => {

  data.page = 0
  data.pages = 1
  data.goodlistData = []
  inits()
  userInfo.value = uni.getStorageSync('userInfo')
  // #ifdef H5
  if (!userInfo.value.token) {
    wxlogin()
  }
  // #endif
  userLevel.value = uni.getStorageSync('level')
  moneyName.value = uni.getStorageSync('money')
  account.value = userInfo.value.account

})


onPullDownRefresh(() => {
  inits()
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 500);
})
onReachBottom(() => {
})

function wxlogin() {
  uni.login({
    provider: 'weixin', //使用微信登录
    success: function (loginRes) {
      uni.showLoading({
        title: '登录中'
      });
      var config = {
        code: loginRes.code,
      }
      proxy.$request({
        url: 'api/wxLogin/',
        method: 'post',
        data: config,
        success: res => {
          uni.hideLoading()
          if (res.errno == 0) {
            userInfo.value = res.data
            uni.setStorageSync('userInfo', res.data)
          } else if (res.errno == 3) {
            data.open_id = res.data
          } else {
            uni.showToast({
              icon: 'none',
              title: res.errmsg
            })
          }
        }
      })
    },
  });
}


function inits() {
  appContext.config.globalProperties.$request({
    url: `api/user_info/`,
    method: 'get',
    success(resd) {
      if (resd.errno == 0) {
        userInfo.value = resd.data
        uni.setStorageSync('userInfo', resd.data)
        const {total_money,total_coupon,green}=resd.data
        if( (total_money+total_coupon)>=green*4){
          uni.showToast({
            title: '您的补贴即将达到上限',
            icon: 'none',
            duration: 2000,
          })
        }

        // getSign() //获取签到积分
      }
    }

  })

}


function copy(data) {
  uni.setClipboardData({
    data: data,
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
      })
    }
  });
}


function toUrl(item) {
  proxy.$goURl(item.url)

}
</script>
<style lang="scss" scoped>
.content {
  height: 100vh;
  width: 100vw;
  overflow: auto;
  background-image: url("https://img.fubaozx.cn/static/newImg/bg1.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  box-sizing: border-box;

  .header {
    margin-bottom: 42rpx;
    margin-top: 70rpx;
    width: 100%;
    padding: 0 0 0 30rpx;
    box-sizing: border-box;

    .avatar {
      width: 108rpx;
      height: 108rpx;
      border-radius: 50%;
      margin-right: 20rpx;
    }

    .right {
      height: 108rpx;

      justify-content: space-around;
      padding-bottom: 10rpx;
    }

    .level {
      min-width: 124rpx;
      height: 40rpx;
      padding: 0 10rpx;
      margin-left: 10rpx;
      background: linear-gradient(90deg, #EFEFEF 0%, #D4D4D4 100%);
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      border: 2rpx solid #F7F8F9;
      //border-image: linear-gradient(116deg, rgba(255, 255, 255, 1), rgba(230, 230, 230, 1)) 2 2;
      color: #434343;
    }

    .rate {
      margin-left: 128rpx !important;
    }

    .qiehuan {
      //width: 170rpx;
      height: 52rpx;
      padding: 0 20rpx;
      background: #FFFFFF;
      border-radius: 27rpx 0rpx 0rpx 27rpx;
      opacity: 0.8;
      gap: 5rpx;

      .qiehuan_icon {
        width: 38rpx;
        height: 38rpx;

      }
    }
  }

  .jifen {
    width: 690rpx;
    margin: 0 auto;
    box-sizing: border-box;

    .jifen_cnt {

      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 32rpx 18rpx;

      .it {
        height: 184rpx;
        width: 336rpx;
        padding-left: 20rpx;
      }
    }

    .jficon {
      padding: 24rpx 22rpx;
      width: 40rpx;
      height: 40rpx;

    }

    .text_6_36 {
      margin-top: 5rpx;
    }
  }

  .fff_cnt {
    box-sizing: border-box;
    border-radius: 32rpx 32rpx 0 0;
    background: linear-gradient(180deg, #fff 0%, #F7F7F7 10%);
    margin-top: 28rpx;
    padding: 0rpx 30rpx;

    .order {
      box-sizing: border-box;
      width: 690rpx;
      //height: 216rpx;
      background: #FFFFFF;
      border-radius: 32rpx 32rpx 32rpx 32rpx;
      margin-bottom: 32rpx;
      padding: 24rpx 28rpx;

      .title {
        margin-bottom: 32rpx;
      }
    }

    .jingci {
      width: 688rpx;
      height: 126rpx;
      margin: 30rpx auto;
      background-image: url("https://img.fubaozx.cn/static/newImg/bg2.png");
    }

    .juan {
      margin-bottom: 52rpx;

      .it {
        width: 336rpx;
        height: 145rpx;
        background-image: url("https://img.fubaozx.cn/hemajishi/17579213338222.png");
white-space: nowrap;
        padding: 20rpx;
        box-sizing: border-box;
      }

      .it2 {
        background-image: url("https://img.fubaozx.cn/hemajishi/1757921340585.png");

      }
    }

    .Tools {
      width: 690rpx;
      //height: 292rpx;
      margin: 30rpx auto;
      display: grid;
      box-sizing: border-box;
      margin-top: 42rpx;

      .items {
        background: #FFFFFF;
        padding: 28rpx 32rpx;
        border-radius: 32rpx 32rpx 32rpx 32rpx;

      }
    }


  }

}

.title_box {
  margin-bottom: 28rpx;
  align-items: center;

  .title_img {
    width: 40rpx;
    height: 40rpx;
    margin-right: 12rpx;
  }
}
</style>
